//====================================================
//
//      tabs
//
//====================================================


//设置标签页按钮尺寸
.tabs-nav-size(@paddingtb; @paddinglr; @fontsize; @height; @lineheight; @fontweight:@fontweight-def) {
    padding: @paddingtb @paddinglr;
    height: @height;
    line-height: @lineheight;
    font-size: @fontsize;   //unit( @fontsize, em );
    font-weight: @fontweight;

}

//设置标签页按钮样式
.tabs-nav-style(@bgcolor; @borderwidth-nav; @bordercolor-nav; @color; @radius:@radius-tab-nav) {
    color: @color;
    background-color: @bgcolor;
    border-bottom: @borderwidth-nav solid @bordercolor-nav;
    .prefix-border-top-radius(@radius);
}


//默认标签页
.@{prefix}tabs {
    position: relative;
    z-index: @zindex-tabs;

    .@{prefix}tabs-navs {
        padding: 0;
        margin: 0;
        border: none;
        border-bottom: @borderwidth-tabs-navs solid @bordercolor-tabs-navs;
        background-color: @bgcolor-tabs-navs;
        cursor: @cursor-pointer;
        .comm-inlineblock-clearspace();

        .@{prefix}tabs-nav {
            display: inline-block;
            position: relative;
            padding: 0;
            margin: 0;
            // margin-left: 3px;
            margin-bottom: -@borderwidth-tabs-navs;
            z-index: @zindex-tabs-nav;

            .tabs-nav-size(@padding-tabs-nav-tb; @padding-tabs-nav-lr; @fontsize-tabs-nav; @height-tabs-nav; @lineheight-tabs-nav);
            .tabs-nav-style(@bgcolor-tabs-nav; @borderwidth-tabs-nav; @bordercolor-tabs-nav; @color-tabs-nav);
            .prefix-transition();
            .prefix-selecttext(none);

            &:first-child {
                margin-left: 0;
            }

            &:hover,
            &.hover {
                .tabs-nav-style(@bgcolor-tabs-nav-hover; @borderwidth-tabs-nav; @bordercolor-tabs-nav-hover; @color-tabs-nav-hover);
                z-index: @zindex-tabs-nav-hover;
            }
            &:active,
            &.active {
                .tabs-nav-style(@bgcolor-tabs-nav-active; @borderwidth-tabs-nav; @bordercolor-tabs-nav-active; @color-tabs-nav-active);
                z-index: @zindex-tabs-nav-active;

                &:focus,
                &.focus {
                    border-color: @bordercolor-tabs-nav-active;
                    z-index: @zindex-tabs-nav-active;
                    .prefix-tabfocus();
                }
            }
            &.active {
                cursor: @cursor-def;
            }
        }
    }

}

.@{prefix}tabs-small {
    .@{prefix}tabs-navs {
        .@{prefix}tabs-nav {
            .tabs-nav-size(@padding-tabs-nav-small-tb; @padding-tabs-nav-small-lr; @fontsize-tabs-nav-small; @height-tabs-nav-small; @lineheight-tabs-nav-small);
        }
    }
}